<header class="mui-bar mui-bar-nav header">
  <h1 class="mui-title">产品列表</h1>
</header>
<div class="mui-content">
  <!--搜索-->
  <div class="search">
    <div class="mui-input-row mui-search">
      <input type="search" class="mui-input-clear" placeholder="搜索商品" onkeyup="enterSearch(event)">
    </div>
  </div>
  <!--分类-->
  <div class="title"><img src="/images/c.png"/></div>
  <ul class="mui-table-view mui-grid-view mui-grid-9 category">
  </ul>
</div>
<div class="jl"></div>
<nav class="mui-bar mui-bar-tab">
  <a class="mui-tab-item" href="/">
    <span class="mui-icon "><i class="iconfont">&#xe601;</i></span>
    <span class="mui-tab-label">首页</span>
  </a>
  <a class="mui-tab-item mui-active" href="/list">
    <span class="mui-icon mui-icon-list"></span>
    <span class="mui-tab-label">列表</span>
  </a>
  <a class="mui-tab-item" href="/cart">
    <span class="mui-icon"><i class="iconfont">&#xe600;</i></span>
    <span class="mui-tab-label">购物车</span>
  </a>
  <a class="mui-tab-item" href="/account">
    <span class="mui-icon"><i class="iconfont">&#xe654;</i></span>
    <span class="mui-tab-label">我的</span>
  </a>
</nav>
<script>
  $(function(){
      $.get('/categories/', function (call) {
        console.log(typeof(call));
        var cat_list = JSON.parse(call);
        for(var i=0; i<cat_list.length; i++){
            var pic_num = i%3+1
            console.log(cat_list[i]);
            $('.category').append('<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="/product_list/'+cat_list[i]+'"><div class="mui-media-body">'+cat_list[i]+'</div><span><img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/cat_icon/'+cat_list[i]+'.jpg"/></span></a></li>');
        }
      })
  })
  function enterSearch(e) {
    if(e.keyCode == 13) {
        var q = $('.mui-input-clear').val();
        window.location.href = '/search/?q='+q;
    }
  }
</script>
